<div class="page page-full bg-white animation-fade">
    <div class="page-aside">
        <div class="page-aside-switch">
            <i class="icon wb-chevron-left" aria-hidden="true"></i>
            <i class="icon wb-chevron-right" aria-hidden="true"></i>
        </div>
        <div class="page-aside-inner height-full" data-plugin="slimScroll">
            <div class="page-aside-section">
                <div class="list-group">
                    <a class="list-group-item active" href="javascript:;" onclick="Page.User.filterUser('')">
                        <i class="icon wb-tag" aria-hidden="true"></i>所有用户
                    </a>
                </div>
            </div>
            <div class="page-aside-section">
                <h5 class="page-aside-title">角色</h5>
                <div class="list-group has-actions user-contents" id="allRole_info">
                    <script type="text/html" id="roleTpl">
                        {{each data as role}}
                        <div class="list-group-item" onclick="Page.User.filterUser('{{role.id}}')">
                            <div class="list-content">
                                <span class="list-text">{{role.name}}</span>
                                <div class="item-actions">
                                    <span class="btn btn-pure btn-icon" data-toggle="dialog" data-options={url:"${base}/admin/sys/role/edit?id={{role.id}}",onClose:Page.User.loadRoles}>
                                        <i class="icon glyphicon glyphicon-edit"></i>
                                    </span>
                                    <span class="btn btn-pure btn-icon" data-toggle="doDel" data-options={url:"${base}/admin/sys/role/del/id={{role.id}}"}>
                                        <i class="icon glyphicon glyphicon-remove"></i>
                                    </span>
                                </div>
                            </div>
                        </div>
                        {{/each}}
                    </script>
                </div>

            </div>

        </div>
    </div>
    <div class="page-main ">
        <div class="page-header">
            <h1 class="page-title">用户列表</h1>
            <div class="page-header-actions" id="userToolBar">
                <a class="btn btn-primary" href="${base}/admin/sys/user/create" data-toggle="add">
                    <i class="fa fa-plus" aria-hidden="true"></i> 添加
                </a>
                <a class="btn btn-primary" href="${base}/admin/sys/user/edit?id={{id}}" data-toggle="edit">
                    <i class="fa fa-pencil-square-o" aria-hidden="true"></i> 编辑
                </a>
                <a class="btn btn-danger"  href="${base}/admin/sys/user/del" href="#" data-toggle="del">
                    <i class="fa fa-trash-o" aria-hidden="true"></i> 删除
                </a>
            </div>
        </div>
        <div class="page-content ">
            <@dataGrid id="sys_user_table"></@dataGrid>
        </div>
    </div>

</div>


<script type="text/javascript">
    $.namespace('Page.User');

    Page.User = function () {
        return {
            init:function () {
                Page.User.loadRoles();
                Page.User.loadUsers();
            },
            loadRoles : function () {
                Bolt.ajax('doajax',{
                    url: '${base}/admin/sys/role/getAllRole',
                    type:'GET',
                    loadingMask : true,
                    okCallback:function(roles){
                        console.info(roles);
                        var html = template('roleTpl',{data: roles});
                        console.info(html);
                        $('#allRole_info').empty().html(html);
                    }
                })
            },
            loadUsers:function(){
                $('#sys_user_table').boltDataGrid({
                    height: 'auto',
                    tableWidth: '100%',
                    toolbar: '#userToolBar',
                    linenumberAll: true,
                    pagination:true,
                    dataUrl: '${base}/admin/sys/user/page'
                })
            },
            filterUser:function(roleId){
                $('#sys_user_table').boltDataGrid('refresh',{roleId:roleId});
            },
            state: function (data) {
                if (data) {
                    return '<span class="label  label-primary ">否</span>';
                } else {
                    return '<span class="label label-warning">是</span>';
                }
            },
            userOperation:function(data){
                var html =
                    '<div data-toggle="rowToolbar">'
                    + ' <a class="btn btn-info" href="${base}/admin/sys/user/edit?id={{id}}" data-toggle="edit">编辑</a>'
                    + ' <a class="btn btn-danger" href="${base}/admin/sys/user/del" data-toggle="del">删除</a></div>';
                return html
            }
        }
    }();
    $(document).ready(function () {
        Page.User.init();
    });
</script>


